<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
          width: 100px;
          height: 100px;
          background-color: pink;
          /*透明度 0- 1*/
          /*opacity: 0.5;*/
          /*图像 url：图像的地址*/
          background-image: url(../HTML/1.png);
          /* 第一个参数控制左右 第二个参数控制上下*/
          /*background-position: 10px 10px;*/
          background-position: center center;

          background-repeat: no-repeat;
          /*一般情况下 我们UI会将图片的大小和盒子的大小一致 这两个属性效果一致*/
          background-size: contain;

          /*背景⾊ 背景图 背景图平铺⽅式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值 ， 不区分顺序）
            一般不用
          */
          /*background: pink url("../HTML/1.png") no-repeat 10px 10px/cover;*/
        }


    </style>
</head>
<body>
<!--
  绝对单位：
    cm, mm , Q, ....
    一旦设定 就无法改变

  相对单位：
    相对于谁 相对的发生变化也会跟着变化
    em：相对于父元素的字体大小
    rem： 相当于根元素的字体大小

  百分比：相对于的百分比 不写就是默认父级100%

  数字：一般用于透明度

  颜色：
  （1）颜色的英文
  （2）使用rgb（） 使用十六进制 或者是3原色
  （3）使用rgba（）a指的是透明度


-->
<div class="div1"></div>
</body>
</html>